Making embed images with Typst
Just making a quick post to show off new functionality. I saw a couple websites using Typst to generate OpenGraph embed images. I basically took the implementation from crates.io's crates_io_og_image library. (It's MIT licensed, I'm allowed to!)
One thing I noticed: invoking Typst is slow slow. I ended up having to add caching to keep rendered images around.
Another issue was that Discord embeds were, like, wrong? Well first, they looked like this:
I looked at MDN's embed meta tags, and saw that they used this:
<meta name="og:image:type" content="image/png">
<meta name="og:image:height" content="1080">
<meta name="og:image:width" content="1920">
<meta name="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.">
I thought that maybe it couldn't determine the size, so used a small version? So I updated my site, and it still wasn't working. So I looked again, and noticed this rather unassuming tag:
<meta name="twitter:card" content="summary_large_image">
*sigh* Why is Twitter here?? Do I have to add this to my website?
I guess so. I went to Discord's embed tester, and it explicitly says that they use Twitter embed stuff. I suppose this stuff isn't really specified. I feel like OpenGraph should add something like this eventually.
Anyway, I added all of this stuff and it worked. Yaaay.
Here's a sample embed:
There's a chance that I could accidentally mess this up if I put a big title or subtitle in. That would be pretty funny.